<template>
	<view class="buy-all-box">
		<view class="">
		<!-- 	<u--input placeholder="搜索" border="surround" v-model="searchVal" shape='circle' inputAlign='center'
				suffixIcon='search' suffixIconStyle="font-size: 20px;color:#7B77FE" autoface @confirm="searchConfirm">
			</u--input> -->
			<u-search placeholder="请输入内容" v-model="searchVal" :clearabled="true" :showAction="true" borderColor="#e1e1e1"  searchIconSize="28" bgColor="white" height="70" actionText="搜索"  @search="searchConfirm" @custom="searchConfirm" @clear="searchClear"></u-search>
		</view>
		<view class="mark-box">
			<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltolower="lower">
				<view class="mark-item-box">
					<view class="mark-list" v-for="(item,index) in buyListArr" :key="index"
						@click="toBuyInfo(item,index)">
						<view class="mark-collection" @click.stop="collectMethod(item,index)">
							<img v-show="!item.collec" src="https://file.casugn.com/storecompcard//6O228HBtk3wRe440b1cca46aba4f3db8280d67901c74_1662341362856.png" alt="">
								
							<img v-show="item.collec" src="https://file.casugn.com/storecompcard//mBjjyxq1i74Aa78abb376722c7b4ffa682224920060e_1663137688378.png"alt="">
						</view>
						<view class="mark-title-box">
							<view class="mark-title-lt">
								正在采购
							</view>
							<view class="mark-title-rt">
								{{item.endTime?item.endTime.substring(0, 10):''}}
							</view>
						</view>
						<view class="mark-pro-name">
							{{item.name}}
						</view>
						<view class="mark-pro-num">
							需求数量：<text>{{item.buyNum}}</text>
						</view>
						<view class="mark-pro-area">
							所在地区：<text>{{item.city}}</text>
						</view>
						<view class="mark-pro-cont">

							<!-- <view class="mark-pro-cont-tel">
								381人已联系
							</view> -->
							<view class="mark-pro-cont-date">
								{{item.endTime==null?'长期采购':'截止日期:'+item.endTime.substring(0, 10)}}
							</view>
						</view>
					</view>
				</view>

			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		// props:{
		// 	buyListArr: {
		// 		type: Array,
		// 		default () {
		// 			return [] //['gif']
		// 		}
		// 	},
		// },
		data() {
			return {
				searchVal: '',
				openId: '', //门店id
				pageNo: 1,
				pageSize: 10,
				goodsList: [], //
				total: 0,
				selectAllCouponCode: [],
				buyListArr: [],
				openId: '',
				notColImg: 'https://file.casugn.com/storecompcard//6O228HBtk3wRe440b1cca46aba4f3db8280d67901c74_1662341362856.png',
				colImg: 'https://file.casugn.com/storecompcard//3CztdOoSA8SYa78abb376722c7b4ffa682224920060e_1662341384777.png',
			};
		},
		filters: {
		    timeFilter (value) {
		      let loc = value.indexOf(' ')
		      return value.substring(0, loc)
		    }
		  },
		mounted() {
			let openId = uni.getStorageSync('openId')
			this.openId = openId.openid
			this.buyListArr=[]
			this.getMaketBuyLists()
			// console.log("sadasdad")
			// console.log(this.buyListArr)
			// console.log("sadasdad")
		},
		methods: {
			lower() {
				// console.log(1)
				console.log("找供应")
				if (this.pageNo * 10 > this.total) {
					uni.showToast({
						title: '没有更多数据',
						icon: 'none'
					})
				}
				this.pageNo++
				this.getMaketBuyLists()
			},
			// 找采购列表数据
			getMaketBuyLists() {
				let openId = uni.getStorageSync('openId')
				console.log("openId", openId)
				this.openId = openId.openid
				this.$api.queryMarketBuyLists(this.searchVal,this.openId, this.pageNo, this.pageSize).then(res => {
					console.log(res)
					if (res.success) {
						this.buyListArr = [...this.buyListArr, ...res.result.records]
						this.total = res.result.total
					}
				})
			},
			// 采购搜索
			// searchMethod(val){
			// 	console.log(val)
			// 	this.buyArr=[]
			// 	this.total=0
			// 	this.pageNo=1
			// 	this.searchVal=val
			// 	let openId = uni.getStorageSync('openId')
			// 	console.log("openId", openId)
			// 	this.openId=openId.openid
			// 	this.$api.queryMyCouponLists(this.searchVal,this.openId,this.pageNo,this.pageSize).then(res => {
			// 		console.log(res)
			// 		if(res.success){
			// 			this.buyArr=res.result.records
			// 			this.total = res.result.total
			// 		}
			// 	})
			// },
			toBuyInfo(item, index) {
				console.log(item, index)
				uni.setStorageSync('pageBuyId', item.id)
				uni.navigateTo({
					url: '/pagesBusiness/marketPage/marketBuyInfo'
				})
			},
			searchConfirm(val) {
				console.log(val)
				// this.$emit("searchMethod",val)
				this.buyListArr = []
				this.total = 0
				this.pageNo = 1
				this.searchVal = val
				let openId = uni.getStorageSync('openId')
				console.log("openId", openId)
				this.openId = openId.openid
				this.$api.queryMarketBuyLists(this.searchVal,this.openId, this.pageNo, this.pageSize).then(res => {
					console.log(res)
					if (res.success) {
						this.buyListArr = res.result.records
						this.total = res.result.total
					}
				})
			},
			searchClear(){
				// console.log(val)
				this.total = 0
				this.pageNo = 1
				this.searchVal = ''
				let openId = uni.getStorageSync('openId')
				console.log("openId", openId)
				this.openId = openId.openid
				this.$api.queryMarketBuyLists(this.searchVal,this.openId, this.pageNo, this.pageSize).then(res => {
					console.log(res)
					if (res.success) {
						this.buyListArr = res.result.records
						this.total = res.result.total
					}
				})
			},
			collectMethod(item, index) {
				if (item.collec == false) {
					// 收藏
					let data = {
						openId: this.openId,
						recordId: item.id,
						type: 2
					}
					this.$api.collectionToBuy(data).then(res => {
						console.log(res)
						if (res.success) {
							// console.log(item,index)
							// item.collec=!item.collec
							// console.log(item.collec)
							let searchVal = ''
							this.searchConfirm(searchVal)
						} else {
							uni.showToast({
								title: res.message,
								icon: 'none'
							})
						}
					})
				} else {
					// 取消收藏
					let data = {
						openId: this.openId,
						recordId: item.id,
						type: 2
					}
					this.$api.collectionToBuy(data).then(res => {
						console.log(res)
						if (res.success) {
							let searchVal = ''
							this.searchConfirm(searchVal)
						} else {
							uni.showToast({
								title: res.message,
								icon: 'none'
							})
						}
					})
				}


			},

		}
	}
</script>

<style lang="scss" scoped>
	page,
	.buy-all-box {
		padding: 20upx;
		// height: 100vh;
	}

	.mark-box {
		margin-top: 20upx;

		.scroll-Y {
			height: 100vh;
			width: 100%;

			.mark-item-box {
				.mark-list {
					padding: 20upx;
					margin-top: 40upx;
					// border-bottom: 1px solid #999999;
					position: relative;
					box-shadow: 0px 0px 5px 1px rgba(211, 211, 211, 0.4);

					.mark-collection {
						position: absolute;
						right: 10upx;
						top: 150upx;
						width: 60upx;
						height: 60upx;

						img {
							width: 60upx;
							height: 60upx;
						}
					}

					.mark-title-box {
						display: flex;
						justify-content: space-between;
						font-size: 30upx;
						color: #999999;
						padding: 10upx 0;

						.mark-title-lt {
							background: #1dbf73;
							color: white;
							// width: 200upx;
							padding: 5upx 10upx;
						}

						.mark-title-rt {
							font-size: 28upx;
							padding: 5upx 10upx;
						}
					}

					.mark-pro-name {
						padding: 10upx 0;
						font-weight: bold;
						font-size: 34upx;
					}

					.mark-pro-num,
					.mark-pro-area {
						padding: 10upx 0;
						font-weight: 400;
						font-size: 32upx;
						color: #666666;
					}

					.mark-pro-cont {
						display: flex;
						// justify-content: ;
						font-size: 28upx;
						color: #999999;
						padding: 10upx 0;

						.mark-pro-cont-date {
							// margin-left: 20upx;
						}
					}
				}


			}


		}
	}
</style>
